<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>

    <head>
        <title></title>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <style type="text/css">
            .demo-options,
            .option-row {
                margin-top: 10px;
            }
        </style>

    </head>

    <body>

<script type="text/javascript">
  var	spread ;
  //public function
  function Product(id,  date,description, amount, balance, cost, weight) {
      this.id = id;
      this.description = description;
      this.amount = amount;
      this.balance = balance;
      this.date = date;
  }
  
  function getProducts(dataJson) {
      var dataList = [];
      console.log(dataJson.Balance);
     	for (var i = 1; i <= dataJson.Amount.length; i++) {
             dataList[i - 1] = new Product(i,
          		   dataJson.AusDataSet[i-1].arriveTime,
          		   dataJson.Description[i-1],
          		   dataJson.Amount[i-1],
          		   dataJson.Balance[i-1],
                     ""
                    );
         }
      return dataList;
  }
  
  function initSpread(spread,dataJson) {
      spread.isPaintSuspended(true);
      spread.setTabStripRatio(0.8);
      var products = getProducts(dataJson);
      var sheet1 = spread.getSheet(0);
      sheet1.setName("Statement");
      sheet1.autoGenerateColumns = false;
      sheet1.setDataSource(products);
      var colInfos = [
          { name: "id", displayName: "ID" },
          { name: "date", displayName: "Date", formatter: "0.00", size: 200 },
          { name: "description", displayName: "Description", size: 180 },
          { name: "amount", displayName: "Amount", size: 80 },
          { name: "balance", displayName: "Balance", formatter: "0.00", size: 100 }
      ];
      sheet1.bindColumns(colInfos);
      spread.isPaintSuspended(false);
      
  };
  
  function myInitSpread(spread,ausData) {
      var spreadNS = GcSpread.Sheets; 
      var sheet = spread.sheets[0];
      sheet.isPaintSuspended(true);

      var source = new spreadNS.CellBindingSource(ausData);
      //设置标题
      sheet.addSpan(0, 0, 3, 4);
      sheet.setValue(0, 0, "statement");
      sheet.getCells(0, 0, 2, 3).hAlign(1).vAlign(1);
      sheet.getCells(0, 0, 2, 2).font("lighter 28pt Calibri");

      //sheet.setValue(3, 0, 'Number');
      sheet.setValue(3, 0, 'Date');
      sheet.setValue(3, 1, 'Description');
      sheet.setValue(3, 2, 'Amount');
      sheet.setValue(3, 3, 'Balance');

      for (var i = 0; i <ausData.Balance.length; i++) {
          //sheet.setValue(i+3, 0, i.toString());
          sheet.setBindingPath(i+3, 0, "AusDataSet."+i.toString()+".arriveTime");
          sheet.setBindingPath(i+3, 1, "Description."+i.toString());
          sheet.setBindingPath(i+3, 2, "Amount."+i.toString());
          sheet.setBindingPath(i+3, 3, "Balance."+i.toString());


      };
      sheet.setColumnWidth(0, 160);
      sheet.setColumnWidth(1, 160);
      sheet.setColumnWidth(2, 80);
      sheet.setColumnWidth(3, 80);
/*       sheet.setColumnWidth(4, 80); */
      sheet.setDataSource(source);

      var path = sheet.getBindingPath(0, 0);
     
      sheet.isPaintSuspended(false);

  };
  function init(){ 
		 var first = "";
		 var a = $('[name="arriveStartSch"]').val()==undefined?" ":$('[name="arriveStartSch"]').val();
		 var b = $('[name="arriveEndSch"]').val()==undefined?" ":$('[name="arriveEndSch"]').val();
		 var c = $('[name="agentRefSch"]').val()==undefined?" ":$('[name="agentRefSch"]').val();
		  $.getJSON(ctx+"listStatus.do?arriveStartSch= "+a+"&arriveEndSch= "+b+"&agentRefSch="+c,function(dataJson){
	        
			  $(document)
	                .ready(function () {
	                	
	                		
	                		spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));
	                		
	                		myInitSpread(spread,dataJson);
		                   
		                    $("#btnPrint").click(function () {
		                        // used to adjust print range, should set with printInfo (refer custom print for detail)
		                        spread.sheets[0].setText(31, 11, " ");
		                        spread.print();
		                    });
		                    
		                    $("#btnAddSheet")
		                        .click(function () {
		                            spread.addSheet(spread.getSheetCount());
		                        });
		
		                    $("#btnRemoveSheet")
		                        .click(function () {
		                            if (spread.getSheetCount() > 0) {
		                                spread.removeSheet(0)
		                            }
		                        });
		                    
		                    $("#btnClearSheets")
		                        .click(function () {
		                            spread.clearSheets();
		                        });
	                    
	                });
	        });
	  }
	  
  
  function update(){ 
	 var a = $('[name="arriveStartSch"]').val()==undefined?" ":$('[name="arriveStartSch"]').val();
	 var b = $('[name="arriveEndSch"]').val()==undefined?" ":$('[name="arriveEndSch"]').val();
	 var c = $('[name="agentRefSch"]').val()==undefined?" ":$('[name="agentRefSch"]').val();
	  console.log(ctx+"listStatus.do?arriveStartSch= "+a+"&arriveEndSch= "+b+"&agentRefSch="+c);  
	 $.getJSON(ctx+"listStatus.do?arriveStartSch= "+a+"&arriveEndSch= "+b+"&agentRefSch="+c,function(dataJson){
		 myInitSpread(spread,dataJson);
        });
  }

  init();
  
</script>

        <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north',split:true,border:false" style="height: 80px;">
                <form id="searchForm">
                    <table>
                        <tr>
                            <td><a id="btn_add" class="easyui-linkbutton" data-options="group:'g1',iconCls:'icon-add'">添加</a></td>
                            <td><a id="btn_dele" class="easyui-linkbutton" data-options="group:'g1',iconCls:'icon-remove'">删除</a></td>
                            <td><a onclick="grid.datagrid('reload');" href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'ext-icon-arrow_refresh'">刷新</a></td>
                        </tr>
                    </table>
                    <table>
                        <tr>
                            <td>agent单号</td>
                            <td>
                                <input id = "agentRefSch" name="agentRefSch" class="textbox" style="width: 120px; height: 22px;" />
                            </td>
                            <td>到达时间</td>
                            <td>
                                <input id="start" name="arriveStartSch"  class="easyui-datebox" vaule="default" style="width: 100px" />
                                <input id="end"  name="arriveEndSch"  class="easyui-datebox" vaule="default" style="width: 100px" />
                            </td>
                            <td><a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'ext-icon-zoom',plain:true" onclick="update();">过滤</a> <a href="javascript:void(0);" id="reset_searchFilter" class="easyui-linkbutton" data-options="iconCls:'ext-icon-zoom_out',plain:true" onclick="$('#searchForm input').val('');grid.datagrid('load',{});">重置过滤</a></td>
                        </tr>
                    </table>
                </form>
            </div>
        <div data-options="region:'center',border:false">
            <div id="ss" style="width:100%; height:515px;border: 1px solid gray;" gcuielement="gcSpread" class="no-user-select">
                <div gcuielement="gcSheetFocusElementForTab" tabindex="0" style="position: absolute; overflow: hidden;"></div>
                <div class="demo-options">
                    <input type="button" value="Add sheet" id="btnAddSheet">
                    <input type="button" value="Remove sheet" id="btnRemoveSheet">
                    <input type="button" value="Remove all sheet" id="btnClearSheets">
                    <input type="button" value="Print" id="btnPrint">
                </div>
            </div>
        </div>
	</div>
    </body>

    </html>
